<template>
  <!-- 内容部分开始 -->
  <div class="centent">
    <!-- 开头图片开始 -->
    <div class="headImg"></div>
    <!-- 开头图片结束 -->

    <!-- 面包屑开始 -->
    <div class="crumbs">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/prudoct' }">PRODUCT</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/company' }">COMPANY PRODUCT</el-breadcrumb-item>
        <el-breadcrumb-item>{{ productData.text }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 面包屑结束 -->

    <!-- 商品信息显示部分开始 -->
    <div class="commodity">
      <!-- 图片部分开始 -->
      <div class="comImg">
        <img :src="productData.url" alt />
      </div>
      <!-- 图片部分结束 -->

      <!-- 文字部分开始 -->
      <div class="comText">
        <!-- 标题 -->
        <span>{{ productData.text }}</span>
        <!-- 套餐选项 -->
        <div class="option">
          <el-radio
            fill="#F5992A"
            text-color="#fff"
            v-model="radioVal"
            :label="index"
            border
            v-for="(item, index) in productData.type"
            :key="index"
          >{{ item }}</el-radio>
        </div>
        <!-- 按钮 -->
        <div class="comBtn">
          <button>BLACK</button>
          <button>BROWN</button>
        </div>
      </div>
      <!-- 文字部分结束 -->
    </div>
    <!-- 商品信息显示部分结束 -->
  </div>
  <!-- 内容部分结束 -->
</template>

<style lang="less" scoped>
// 内容部分开始
.centent {
  // 开头图片开始
  .headImg {
    width: 100%;
    height: 400px;
    background-image: url("../assets/images/p.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  // 开头图片结束

  //   面包屑开始
  .crumbs {
    width: 60%;
    height: 100px;
    margin-left: 20%;
    display: flex;
    align-items: center;

    .el-breadcrumb__item {
      font-size: 15px;
    }
  }
  //   面包屑结束

  //   商品信息显示部分开始
  .commodity {
    width: 60%;
    height: 500px;
    position: relative;
    left: 50%;
    transform: translate(-50%);
    // background-color: royalblue;

    // 图片部分开始
    .comImg {
      width: 40%;
      height: 90%;
      position: absolute;
      top: 50%;
      left: 10%;
      transform: translate(0, -50%);

      img {
        width: 100%;
        height: 100%;
      }
    }
    // 图片部分结束

    // 文字部分开始
    .comText {
      width: 40%;
      height: 90%;
      position: absolute;
      top: 50%;
      right: 0;
      transform: translate(0, -50%);
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      // 标题
      span {
        width: 100%;
        height: 50px;
        margin-top: 40px;
        font-size: 25px;
      }
      // 套餐选项
      .option {
        width: 100%;
        margin-top: 40px;
        .el-radio {
          background-color: #f6f6f6;
          margin-top: 10px;
        }
      }
      // 按钮
      .comBtn {
          margin-top: 40px;

          button {
              width: 120px;
              height: 40px;
              color: #fff;
              font-size: 15px;
              border: none;
              border-radius: 15px;
              margin-right: 20px;
              outline: none;

              &:nth-child(1) {
                  background-color: #000;
              }
              &:nth-child(2) {
                  background-color: #6C4548;
              }
          }
      }
    }
    // 文字部分结束
  }
  //   商品信息显示部分结束;
}
// 内容部分开始
</style>

<script>
import bus from "../assets/js/bus";
export default {
  data() {
    return {
      productData: {},
      radioVal: "",
    };
  },
  created() {
    // bus.$on('detailedData', val => {
    //     this.productData = val
    //     console.log(val)
    //     console.log(this.productData)
    // })
    // this.productData = this.$router.params
    this.productData = this.$route.params;
    console.log(this.productData);
  },
  methods: {},
};
</script>